<template>
  <div>
    <van-nav-bar
      :title="HomeInfo.community"
      background-color="#21b97a"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="topImg">
      <img :src="'http://liufusong.top:8080' + HomeInfo.houseImg"/>
    </div>
    <div class="Info">
      <div>
        <h3>{{ HomeInfo.title || "暂无标题" }}</h3>
        <div class="iconInfo">
          <span v-for="(item, index) in HomeInfo.tags" :key="index">{{
            item
          }}</span>
        </div>
      </div>
      <hr />
      <div class="second">
        <div>
          {{ HomeInfo.price }}/月
          <span>租金</span>
        </div>
        <div v-if="this.HomeInfo.roomType">
          {{ homeNum() }}
          <span>房型</span>
        </div>
        <div>
          {{ HomeInfo.size }}/平米
          <span>面积</span>
        </div>
      </div>
      <hr />
      <div class="third">
        <div>装修:精装</div>
        <div v-if="HomeInfo.oriented">朝向:{{ HomeInfo.oriented[0] }}</div>
        <div>楼层:{{ HomeInfo.floor }}</div>
        <div>类型:普通住宅</div>
      </div>
    </div>
    <div class="map">
      <p>小区:</p>
      <div>
        <span v-for="(item, index) in HomeInfo.supporting" :key="index" style="padding-right:10px">{{
          item
        }}</span>
      </div>
      <div>
        <h3>房屋配套</h3>
        <hr />
        <div></div>
      </div>
    </div>
    <div class="homeText" style="padding:0 10px">
      <h3>房源概况</h3>
      <hr />
      <div style="display:flex;justify-content:space-between">
        <div style="display:flex">
          <div style="width:52px;height:52px">
            <img src="http://liufusong.top:8080/img/avatar.png" style="width:100%;padding-top:7px"/>
          </div>
          <div style="margin-left:5px">
            <p>王女士</p>
          <p style='font-size: 12px;
          color: #fa5741;'>已认证房主</p>
          </div>
        </div>
        <div class="btn"><p>发消息</p></div>
      </div>
      <div style='font-size:14px'>
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </div>
    </div>
    <div style="height:48px;padding:0 10px 100px">
      <h3>猜你喜欢</h3>
      <hr/>
      <CellList v-for="(item,index) in list" :key="index" :item='item'/>
    </div>
  <van-tabbar  style='border:#999999' v-if="this.$store.state.list.arr">
  <van-tabbar-item style="font-size:17px"><van-icon name="star-o" size='16px'/>收藏</van-tabbar-item>
  <van-tabbar-item style="font-size:17px">在线咨询</van-tabbar-item>
  <van-tabbar-item style="font-size:17px;color:#ffffff;background-color: #21b97a;">电话预约</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import CellList from '@/components/CellList'
import { homeApi } from '@/api'
export default {
  components: {
    CellList
  },
  async created () {
    console.log(this.$route.params)
    const res = await homeApi({
      id: this.$route.params.keywords
    })
    console.log(res)
    this.HomeInfo = res.data.body
  },
  data () {
    return {
      HomeInfo: '',
      list: this.$store.state.list.slice(0, 3)
    }
  },
  methods: {
    onClickLeft () {
      history.back()
    },
    homeNum () {
      return this.HomeInfo.roomType.substring(0, 2)
    }
  }
}
</script>

<style>
p {
  font-size: 13px;
}
h3 {
  font-size: 16px;
}
.topImg {
  height: 252px;
}

.topImg img {
  width: 100%;
}
.Info {
  height: 266px;
  padding: 20px 10px 10px;
}
.Info h3 {
  font-size: 16px;
}
.Info h3 {
  font-size: 16px;
}
.Info .iconInfo {
  width: 46px;
  height: 20px;
  font-size: 12px;
  color: #39becd;
  background: #e1f5f8;
  border-radius: 5px;
  text-align: center;
}
.Info .second {
  display: flex;
  font-weight: 700;
  justify-content: space-around;
  color: #fa5741;
  font-size: 18px;
  border: 2px #999999;
}
.Info .second span {
  display: block;
  font-size: 14px;
  color: #999999;
  font-weight: 400;
  text-align: center;
}
.third {
  display: flex;
  flex-wrap: wrap;
}
.third div {
  width: 168px;
  height: 26px;
  font-size: 13px;
}
.map {
  padding: 0 10px;
}
.btn{
  position: relative;
  width: 74px;
  height: 29px;
    font-size:14px;
    color: #33be85;
    border: 1px solid #33be85;
    border-radius: 3px;
    margin: 20px;
}
.btn p{
  position:absolute;
   transform:translate(50%,-50%);
}
</style>
